<template>
  <div class="skill-master-release">
    <c-title text="技能发布"></c-title>
    <p class="tips">发布信息</p>
    <van-cell-group>
      <van-field required :readonly="readonly" v-model="title" label="技能名称" placeholder="请输入技能名称" />
      <van-field
        required
        readonly
        :value="category_name"
        @click="show_popup"
        label="技能分类"
        placeholder="请选择技能分类"
        right-icon="arrow"
      />
      <van-field required :readonly="readonly" v-model="desc" label="技能内容" placeholder="请输入技能内容" />
      <van-field required :readonly="readonly" v-model="fee" label="收费标准" placeholder="请输入收费标准">
        <template #right-icon>
          <span style="color: #333;">元/次</span>
        </template>
      </van-field>
      <template v-if="id">
        <van-field
          required
          readonly
          :value="time"
          label="可预约时间"
          placeholder="设置可以预约时间"
          right-icon="arrow"
          @click="goto"
        />
      </template>
      <template v-else>
        <van-field
          required
          readonly
          label="可预约时间"
          placeholder="设置默认预约时间"
          right-icon="arrow"
          @click="showDefault=true"
        />
      <div  style="display: flex; justify-content: space-between; padding: 0.625rem; align-items: center;">
        <div style="flex-shrink: 0;">默认时间：</div>
        <div class="time-box">
          <div v-for="(item,i) in default_time" :key="i" style="position: relative;">
            <span>{{item.work_hour_start}}-{{item.work_hour_end}}</span>
            <img
              @click="deleteTime(item,i)"
              class="close"
              src="../../../../../assets/images/close-orange.png"
              alt
            />
          </div>
        </div>
      </div>
      </template>
      <div style="height: 1.25rem;"></div>
      <div class="upload-box">
        <p  style="margin-bottom: 0.625rem;">短视频</p>
        <div style="display: flex; padding-left: 0.5rem;">
            <div class="upload-elem" style="margin-top: 0;"   v-show="!video">
              <input class="video-input" type="file" id="file" accept="video/*" @change="onReadVideo" />
            </div>
            <div class="uploader-video" v-show="video">
              <video
                preload="metadata"
                controlslist="nodownload"
                width="100%"
                height="100%"
                custom-cache="false"
                ref="video"
                webkit-playsinline="true"
                x5-video-player-type="h5"
                playsinline
                x5-playsinline
                x5-video-orientation="portrait"
                x5-video-player-fullscreen
                autoplay
                controls
                :src="videoUrl"
                id="video"
                muted
                v-show="videoUrl"
                @loadeddata="onloadeddata"
                style="background: #fff;"
              >
                <source :src="videoUrl" type="video/ogg" />
                <source :src="videoUrl" type="video/mp4" />
                <source :src="videoUrl" type="video/webm" />你的浏览器不支持video标签！
              </video>
              <i
                @click.stop="removeImg"
                v-if="(!id && videoUrl) || !readonly"
                class="iconfont icon-guanbi deletaIcon"
              ></i>
          </div>
        </div>
      </div>
      <div style="height: 1.25rem;"></div>
      <div class="upload-box">
        <p class="required">图片</p>
        <div style="padding-left: 0.5rem;">
          <van-uploader
            v-model="photo"
            :deletable="!id || !readonly"
            preview-size="6.4rem"
            :after-read="afterReadPhoto"
            max-count="1"
          >
            <div class="upload-elem"></div>
          </van-uploader>
        </div>
      </div>
      <div style="height: 1.25rem;"></div>
    </van-cell-group>

    <div class="btn" v-if="!id">
      <van-button block round color="#4978F8" @click="submit">提交</van-button>
    </div>

  <template v-if="aplly_for==-1">
    <div v-if="reason">
      <div class="reject">
        <div class="tips">驳回原因</div>
        <div class="reject-content">{{reason}}</div>
      </div>
      <div style="height: 30rpx;"></div>
    </div>
    <div class="btn" style="text-align: right;" >
      <van-button v-if="reason" round color="#4978F8" @click="republish">重新发布</van-button>
    </div>
  </template>

    <van-popup v-model="showDefault" round>
      <div class="popTime">
        <p class="time_title">设置默认工作时间</p>
        <p class="tips_pop">如：08:00-10:00</p>
        <div class="pop-time-box">
          <div class="time" v-for="(date, i) in default_time" :key="i">
            <span>{{date.work_hour_start}}-{{date.work_hour_end}}</span>
            <img
              @click="deleteTime(date,i)"
              class="close"
              src="../../../../../assets/images/close-orange.png"
              alt
            />
          </div>
          <div class="time" @click="editTime">
            <span>添加</span>
          </div>
        </div>
        <div class="button">
          <div class="cancle" @click="showDefault = false">取消</div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="show1" round>
      <div class="popTime">
        <p class="time_title">设置默认工作时间</p>
        <p class="tips_pop">如：08:00-08:10</p>
        <div class="time">
          <span @click="chooseTime('start', choose_start)">{{choose_start || "00:00"}}</span> -
          <span @click="chooseTime('end',choose_end)">{{choose_end || "00:00"}}</span>
        </div>
        <div class="button">
          <div class="cancle" @click="show1=false">取消</div>
          <div class="submit" @click="submitTime">提交</div>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="showTime" position="bottom">
      <van-datetime-picker
        v-model="currentTime"
        type="time"
        @confirm="confirmTime"
        @cancel="showTime = false"
      />
    </van-popup>

    <van-popup v-model="categoryShow" round position="bottom">
      <div class="catrogey-popuop">
        <div class="flex-between p32-40">
          <span @click="categoryShow = false" class="fz24 c999">取消</span>
          <span class="fz30 fw-bold">分类</span>
          <span @click="confirm" class="fz24">确认</span>
        </div>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell
              v-for="item in list"
              :key="item.id"
              :title="item.title"
              clickable
              @click="radio = item.id"
            >
              <template #right-icon>
                <van-radio :name="item.id"></van-radio>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast,Dialog } from "vant";
export default {
  data() {
    return {
      reason:"",
      showTime: false,
      choose_start: "",
      choose_end: "",
      default_time: [],
      show1: false,
      showDefault: false,
      categoryShow: false,
      list: [],
      photo: [],
      videoUrl: "",
      configInfo: {
        video_limit: 60
      },
      time: "",
      radio: "",
      video: "",
      pic: "",
      category_name: "",
      title: "",
      fee: "",
      desc: "",
      id: "",
      today: "",
      readonly: false,

      start_time_str: "",
      finish_time_str: "",
      currentTime: "12:00",
      aplly_for: null,
      realVideo:"",
      apply_status:null,//-1-驳回审核
      is_keep: 1 //1-不保存、2-保存
    };
  },
  activated() {
    if (this.is_keep == 1) {
      this.init();
    }
    this.getData();
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.detail();
    }
  },
  methods: {
    republish(){
      Dialog.confirm({
        message: '请确认是否重复发布',
      })
        .then(() => {
          this.submit();
        })
        .catch(() => {
          // on cancel
        });
    },
    init() {
      this.apply_status = null;
      this.reason = "";
      this.showTime = false;
      this.choose_start = "";
      this.choose_end = "";
      this.default_time = [];
      this.show1 = false;
      this.showDefault = false;
      this.is_keep = 1;
      this.readonly = false;
      this.id = "";
      this.categoryShow = false;
      this.category_name = "";
      this.radio = "";
      this.desc = "";
      this.fee = "";
      this.time = "";
      this.title = "";
      this.photo = [];
      this.pic = "";
      this.video = "";
      this.videoUrl = "";
    },

    onReadVideo(e) {
      console.log("66666");
      let that = this;
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.realVideo = files[0];
      let _size = files[0].size/1024/1024;
      let _max = 100;//php配置最大文件上传大小
      try {
        this.basic_info = JSON.parse(localStorage.getItem("yz_basic_info")) || {};
        if(this.basic_info.upload_max_file_size) _max = this.basic_info.upload_max_file_size/1024/1024;
      } catch (err) {
        // 错误处理
      }
      if(_size > _max){
        document.getElementById("file").value = null;
        this.$dialog.alert({ message: `视频大小超出${_max}M，请压缩后上传！` });
        return;
      }
      if (
        !(
          files[0].name.endsWith(".mp4") ||
          files[0].name.endsWith(".MP4") ||
          files[0].name.endsWith(".mov") ||
          files[0].name.endsWith(".MOV") ||
          files[0].name.endsWith(".svg") ||
          files[0].name.endsWith(".SVG")
        )
      ) {
        that.$dialog.alert({ message: "请上传MP4或MOV格式视频" });
        return;
      }
      this.videoUrl = null;
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(files[0]); //类型1
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(files[0]); //类型2
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(files[0]); //类型3
      }
      console.log(url,"url===");
      this.videoUrl = url;
      this.video = url;
      console.log(this.videoUrl,"videoUrl===");
    },

    deleteTime(data, index) {
      this.default_time.splice(index, 1)
    },
    confirmTime(e) {
      this.start ? (this.choose_start = e) : (this.choose_end = e);
      this.showTime = false;
    },
    editTime() {
      this.showDefault = false;
      this.show1 = true;
    },
    chooseTime(str, time) {
      str === "start" ? (this.start = true) : (this.start = false);
      if (time) {
        this.currentTime = time;
      }
      this.showTime = true;
    },
    submitTime() {
      if(this.choose_start=="" && this.choose_end==""){
        return this.$toast("请选择时间")
      } else if (!this.choose_start) {
        return this.$toast("请选择开始时间")
      } else if (!this.choose_end) {
        return this.$toast("请选择结束时间")
      } else if (this.choose_start.split(':')[0] > this.choose_end.split(':')[0]) {
        return this.$toast("结束时间必须大于开始时间")
      }
      this.default_time.push({ work_hour_start: this.choose_start, work_hour_end: this.choose_end });
      this.show1 = false;
      sessionStorage.setItem("work_time_today", JSON.stringify(this.today));
      sessionStorage.setItem("work_time", JSON.stringify(this.default_time));
    },
    show_popup() {
      if (this.id) {
        return false;
      }
      this.categoryShow = true;
    },
    get_work_time() {
      let work_time = JSON.parse(sessionStorage.getItem("work_time"));
      if (work_time) {
        let str = "";
        work_time.forEach((item, i) => {
          if (i + 1 !== work_time.length) {
            str += `${item.work_hour_start}-${item.work_hour_end}、`;
          } else {
            str += `${item.work_hour_start}-${item.work_hour_end}`;
          }
        });
        console.log(str);

        this.time = str;
        let Year = new Date().getFullYear(),
          month = new Date().getMonth() + 1,
          date = new Date().getDate();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        let work_hour_start = `${Year}-${month}-${date} ${work_time.work_hour_start}:00`;
        let work_hour_end = `${Year}-${month}-${date} ${work_time.work_hour_end}:00`;

        let start_time_str = new Date(work_hour_start).getTime() / 1000;
        let finish_time_str = new Date(work_hour_end).getTime() / 1000;

        this.start_time_str = start_time_str;
        this.finish_time_str = finish_time_str;
        console.log(start_time_str, finish_time_str);
      }
    },
    detail() {
      this.time = "";
      $http.get("plugin.be-within-call.frontend.shi-fu.ability-detail", { aid: this.id }, "").then(res => {
        if (res.result) {
          let data = res.data;
          if(data.status!==-1){
            this.readonly = true;
          }
          this.apply_status=data.apply_status;
          this.reason = data.reason;
          this.title = data.title;
          this.category_name = data.has_one_category.title;
          this.radio = data.category_id;
          this.desc = data.desc;
          this.fee = data.fee;
          this.start_time_str = data.start_time_str;
          this.finish_time_str = data.finish_time_str;
          this.photo = [{ url: data.pic_url }];
          this.pic = data.pic_url;
          this.video = data.video;
          this.aplly_for = data.status;
          this.videoUrl = data.video_url;
          console.log( this.aplly_for," this.aplly_for====");
        } else {
          this.$toast(res.msg);
        }
      });
      $http.get("plugin.be-within-call.frontend.work-time.date-time",{aid:this.id,date:0},"").then(res=>{
        if(res.result){
          console.log(res.data);
          let data = res.data;
          data.forEach((item,i) => {
            if(i==data.length-1){
              this.time+=`${item.start_at}-${item.finish_at}`
            }else{
              this.time+=`${item.start_at}-${item.finish_at}、`
            }
          })
          if(this.aplly_for == -1){
            let default_time = [];
            data.forEach(item=>{
              default_time.push({work_hour_start:item.start_at,work_hour_end:item.finish_at})
            })
            this.default_time = default_time;
          }
        }
      })
      console.log(this.time,"===");

    },
    confirm() {
      let arr = this.list.filter(item => {
        if (item.id == this.radio) {
          return item;
        }
      });
      this.category_name = arr[0].title;
      this.categoryShow = false;
    },
    getData() {
      $http.get("plugin.be-within-call.frontend.index.get-category-list", { sort_type: 2 }).then(res => {
        if (res.result) {
          this.list = res.data;
        } else {
          this.$toast(res.msg);
        }
      });

    },
    goto() {
      let json = {
        aplly_for: 1 //申请未通过
      };
      if (this.id) {
        json.aid = this.id;
        json.aplly_for = 2; //申请通过
      }
      if (this.aplly_for == -1) {
        json.aplly_for = -1;
      }
      this.is_keep = 2;
      this.$router.push(this.fun.getUrl("anytimeSkillMasterWork", json, {}));
    },
    removeImg() {
      this.videoUrl = null;
      this.video = "";
    },
    submit() {
      let default_work_time = [];
      let date = new Date().getDate();
      let month = new Date().getMonth();
      let year = new Date().getFullYear();
      if (month > 10) {
        month = "0" + month;
      }
      if (date > 10) {
        date = "0" + date;
      }

      // let work_time = JSON.parse(sessionStorage.getItem("work_time"));
      // console.log(work_time, "work_time");

      if (this.default_time && this.default_time.length == 0) {
        return this.$toast("请选择预约时间");
      }

       this.default_time.forEach(item => {
        default_work_time.push({
          start_at: new Date(`${year}-${month}-${date} ${item.work_hour_start}:00`).getTime() / 1000,
          finish_at: new Date(`${year}-${month}-${date} ${item.work_hour_end}:00`).getTime() / 1000
        });
      });
      console.log(default_work_time);
      let json = {
        category_id: this.radio,
        fee: this.fee,
        title: this.title,
        desc: this.desc,
        pic: this.pic,
        default_work_time
      };
      if(this.video){
        json.video = this.video
      }
      console.log(json, "json");
      $http.post("plugin.be-within-call.frontend.shi-fu.add-ability", { data: json }, "").then(res => {
        this.$toast(res.msg);
        if (res.result) {
          this.is_keep = 1;
          sessionStorage.removeItem("work_time");
          sessionStorage.removeItem("work_time_today");
          this.$router.replace(this.fun.getUrl("anytimeSkillMasterManage"));
        }
      });
    },
    onloadeddata(e) {
      // console.log(this.id,"idid");
      if (this.id ) {
        return false;
      }
      if(this.aplly_for ==-1 && !this.reason){
        return false;
      }
      let duration = e.target.duration;
      this.video_time = duration;
      if (duration > 60) {
        Toast(`视频长度限制60秒`);
        this.videoUrl = null;
        return;
      }
      this.afterReadVideo();
    },

    afterReadVideo() {
      Toast.loading({
        message: "上传中",
        forbidClick: true
      });
      let uploadAudio = this.fun.getRealUrl("upload.uploadPic", {});
      uploadAudio += "upload_type=video";
      let fd = new FormData();
      fd.append("file", this.realVideo); //进度百分比
      axios
        .post(uploadAudio, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          console.log(response,"======");
          Toast.clear();
          this.$toast(response.data.msg);
          if (response.data.result == 1) {
            this.video = response.data.data.img;
            // this.videoUrl = response.data.data.img_url;
          } else {
            this.videoUrl = null;
          }
        })
        .catch(error => {
          Toast.clear();
          this.videoUrl = null;
          console.log(error);
        });
    },
    afterReadPhoto(e) {
      console.log(e);

      this.blobToBase64(e.file).then(result => {
        console.log(result);

        let fd = new FormData();
        fd.append("file",result);
      this.photo = [
        {
          url: "",
          status: "uploading",
          message: "上传中..."
        }
      ];
      let uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          let { data, result, msg } = response.data;
          if (result == 1) {
            this.photo = [{ url: data.img_url, status: "done", img: data.img }];
            this.pic = data.img;
          } else {
            this.photo = [{ message: "上传失败", url: "", status: "failed" }];
          }
          this.$toast(msg);
        })
        .catch(error => {
          console.log(error);
        });
      })

    },

    async blobToBase64(blob) {
      const reader = await new FileReader() // 实例化一个reader文件
      await reader.readAsDataURL(blob) // 添加二进制文件
      return new Promise((resolve, reject) => {
        reader.onload = async (event) => {
          const base64 = await event.target.result // 获取到它的base64文件
          const scale = 0.70 // 设置缩放比例 （0-1）
          let file = await this.compressImg(base64, scale)
          resolve(file)
        }
      })
    },
    async compressImg(base64, scale) {
      console.log(`执行缩放程序，scale=${scale}`)
      // 处理缩放，转换格式
      // 下面的注释就不写了，就是new 一个图片，用canvas来压缩
      const img = new Image()
      img.src = base64
      return new Promise(function (resolve, reject) {
        img.onload = async function () {
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')
          canvas.setAttribute('width', this.width)
          canvas.setAttribute('height', this.height)
          // 在canvas绘制前填充白色背景  解决出现压缩png图片背景黑色问题
          ctx.fillStyle = "#fff";
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          // 转成base64 文件
          base64 = canvas.toDataURL('image/jpeg', 0.3)
          const arr = base64.split(',')
          const mime = arr[0].match(/:(.*?);/)[1]
          const bytes = atob(arr[1])
          const bytesLength = bytes.length
          const u8arr = new Uint8Array(bytesLength)
          for (let i = 0; i < bytes.length; i++) {
            u8arr[i] = bytes.charCodeAt(i)
          }
          const file = await new File([u8arr], 'filename', { type: mime })
          resolve(file)
        }
      })
    },
    beforeReadVideo(e) {
      //文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise
      console.log("文件 读取前 的回调", e);
      return new Promise((resolve, reject) => {
        let endsName = !(e.name.endsWith(".mp4") || e.name.endsWith(".MP4") || e.name.endsWith(".mov") || e.name.endsWith(".MOV"));
        if (endsName) {
          this.$dialog.alert({ message: "请上传MP4或MOV格式视频" });
          reject();
        } else {
          this.realVideo = e;
          if (window.createObjectURL != undefined) {
            // basic
            this.videoUrl = window.createObjectURL(e); //类型1
          } else if (window.URL != undefined) {
            // mozilla(firefox)
            this.videoUrl = window.URL.createObjectURL(e); //类型2
          } else if (window.webkitURL != undefined) {
            // webkit or chrome
            this.videoUrl = window.webkitURL.createObjectURL(e); //类型3
          }

          if (this.fun.isIosOrAndroid() == "ios") {
            this.$nextTick(() => {
              this.$refs.video.play();
              // this.$refs.video.pause();
            });
          }
          resolve(e);
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
::v-deep .catrogey-popuop .van-cell__title {
  text-align: left;
}

::v-deep .catrogey-popuop .van-radio__icon--checked .van-icon {
  color: #1989fa;
  background-color: unset;
  border-color: unset;
}

::v-deep .catrogey-popuop .van-icon {
  border: unset;
}

.reject-content {
  padding: 1.125rem;
  background: #fff;
  color: black;
  word-break: break-all;
  text-align: left;
  margin-bottom: 1rem;
}

.video-input {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}

.time-box {
  display: flex;
  align-content: center;
  flex-wrap: wrap;

  div {
    padding: 0.3125rem 0.625rem;
    border-radius: 0.625rem;
    margin: 0.3125rem;
    color: #f4a82e;
    background: #fff2e6;
  }
}

.popTime {
  width: 18.125rem;
  min-height: 17.313rem;

  .time_title {
    font-size: 19px;
    font-weight: bold;
    color: #000;
    padding-top: 1.5rem;
  }

  .tips_pop {
    color: #ccc;
    margin: 0.5rem;
  }

  .time {
    width: 13.563rem;
    height: 2.188rem;
    line-height: 2.188rem;
    font-size: 18px;
    background-color: #fff2e6;
    border-radius: 1.094rem;
    color: #f4a82e;
    margin: 3rem auto;
  }

  .button {
    display: flex;
    color: #fff;
    margin-bottom: 1rem;
  }

  .cancle {
    width: 6.25rem;
    height: 1.875rem;
    line-height: 1.875rem;
    background-color: #ccc;
    border-radius: 0.938rem;
    flex: 1;
    margin: 0 1rem;
  }

  .submit {
    width: 6.25rem;
    height: 1.875rem;
    line-height: 1.875rem;
    background-color: #f4a82e;
    border-radius: 0.938rem;
    flex: 1;
    margin: 0 1rem;
  }

  .pop-time-box {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem auto;
    max-height: 13rem;
    overflow-y: scroll;

    .time {
      position: relative;
      width: 7.813rem;
      height: 2.188rem;
      line-height: 2.188rem;
      font-size: 18px;
      background-color: #fff2e6;
      border-radius: 1.094rem;
      color: #f4a82e;
      margin: 1rem 0.5rem;
    }
  }

  .pop-time-box::-webkit-scrollbar {
    display: none;
  }
}

.close {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #f4a82e;
  color: #fff;
  border-radius: 50%;
}

.skill-master-release {
  position: relative;
  padding-bottom: 6.25rem;
  min-height: 100vh;

  .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .p32-40 {
    padding: 1rem 1.25rem;
  }

  .fw-bold {
    font-weight: bold;
  }

  .fz24 {
    font-size: 0.8rem;
  }

  .deletaIcon {
    font-size: 0.35rem;
    padding: 0.25rem;
    box-sizing: border-box;
    background: #999;
    color: #fff;
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    border-radius: 100%;
  }

  .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 0.625rem 0.75rem;
  }

  .upload-box {
    padding-left: 0.8125rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .upload-elem {
    position: relative;
    margin-top: 0.875rem;
    width: 6.4375rem;
    height: 6.4375rem;
    border: 2px dotted #dbdbdb;

    &::after {
      position: absolute;
      content: "+";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.65rem;
      color: #999;
    }
  }

  .uploader-video {
    height: 6.4375rem;
    width: 6.4375rem;
    margin-right: 0.875rem;
    position: relative;
  }

  .required {
    position: relative;
    text-align: left;

    &::before {
      position: absolute;
      left: -0.4063rem;
      color: #ee0a24;
      font-size: 14px;
      content: "*";
    }
  }

  .tips {
    text-align: left;
    font-size: 1.1rem;
    padding: 1.1563rem 0.6563rem;
  }
}
</style>
